<template>
  <div class="home-wrapper">
    <!-- 轮播图区域 -->
    <div class="carousel-region">
      <div class="carousel">
        <el-carousel :interval="5000" arrow="always" height="495px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="article-list">
        <div class="head">
          <div class="head-title">最新文章</div>
          <div class="head-more">更多<i class="el-icon-caret-right"></i></div>
        </div>

        <ul class="article-ul">
          <li class="item">
            <div class="text">
              时光的河入海流，终于我们分头走。时光的河入海流，终于我们分头走。
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!--  内容列表 -->
    <div class="content-list">
      <!-- 分类 -->
      <div class="cate-article">
        <el-tabs v-model="activeTabs" @tab-click="handleTabs">
          <el-tab-pane label="用户管理" name="first">
            <article-list></article-list>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">
            <article-list></article-list>
          </el-tab-pane>
          <el-tab-pane label="角色管理" name="third">
            <article-list></article-list>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 热门 -->
      <div class="popular-article">
        <div class="popular-header">
          <div class="header-title">热门文章</div>
          <div class="header-more">更多<i class="el-icon-caret-right"></i></div>
        </div>

        <div class="popular-list">
          <popular-list></popular-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import articleList from "@/components/articleList/articleList.vue";
import popularList from "@/components/popularList/popularList.vue";

export default {
  name: "Home",
  // 注册组件
  components: {
    articleList,
    popularList,
  },
  data() {
    return {
      activeTabs:"first",

    };
  },
  methods: {

    // 切换文章tabs
    handleTabs(){
      console.log();
    },
  },
};
</script>

<style lang="scss" scoped>
.home-wrapper {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  padding: 55px 180px;

  // 轮播区域
  .carousel-region {

    height: 495px;
    display: flex;
    justify-content: space-between;

    .carousel {
      flex: 1;
      // width: 983px;

      .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
      }

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }

    .article-list {
      margin-left: 46px;
      width: 525px;
      border-radius: 40px;
      background: #fff;
      padding: 40px;

      .head {
        display: flex;
        justify-content: space-between;
        padding-bottom: 30px;
        border-bottom: 2px solid #d8d8d8;

        .head-title {
          font-size: 28px;
          font-weight: bold;
        }
        .head-more {
          font-size: 22px;
          font-weight: normal;
          color: #c4bfbf;
          cursor: pointer;
        }
      }

      .article-ul {
        margin-top: 30px;
        list-style: disc;
        padding: 0px 20px;

        .item {
          color: #3d3d3d;
          font-size: 16px;
          margin-bottom: 30px;
          cursor: pointer;

          .text {
            white-space: nowrap; //不换行
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .item::marker {
          color: blue; /* 设置小圆点颜色为蓝色 */
        }
      }
    }
  }

  .content-list {
    margin-top: 50px;
    // height: 700px;
    // border: 1px solid blue;
    display: flex;
    justify-content: space-between;

    .cate-article {
      flex: 1;
      border: 1px solid red;
    }

    .popular-article {
      // flex: 1;
      width: 525px;
      margin-left: 46px;
      padding: 10px;

      .popular-header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 30px;
        border-bottom: 2px solid #d8d8d8;

        .header-title {
          font-size: 24px;
          font-weight: bold;
        }
        .header-more {
          font-size: 22px;
          font-weight: normal;
          color: #c4bfbf;
          cursor: pointer;
        }
      }

      .popular-list {
        height: 800px;
      }
    }
  }
}

// 媒体查询
@media screen and (min-width: 992px) and (max-width: 1240px) {
  .home-wrapper{
    padding: 55px 30px;
    // 轮播图
    .carousel-region{
    
    }
  }
}

// 媒体查询 最小769px  - 最大991px
@media screen and (min-width: 769px) and (max-width: 991px) {
  .home-wrapper{
    padding: 20px 20px;

    //轮播图区域
    .carousel-region{
      display: block;
      height: 100%;


      .article-list{
        width:100%;
        margin-left: 0px;
        margin-top: 40px;
        height: 495px;
      }
    }

    .content-list{
      display: block;

      .popular-article{
        margin-left: 0px;
        width:100%;
        margin-top: 40px;
      }
    }
  }
}

// 媒体查询 最481px - 最大 768px
@media screen and (min-width: 481px) and (max-width: 768px) {

}

// 最小屏幕
@media screen and (max-width: 480px) {

}

</style>
